<template>
	<el-form label-width="100px">
		<el-form-item label="SPU名称">{{ spuInfo.spuName }}</el-form-item>
		<el-form-item label="SKU名称">
			<el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
		</el-form-item>
		<el-form-item label="价格">
			<el-input
				type="number"
				placeholder="请输入价格"
				v-model="skuInfo.price"
			></el-input>
		</el-form-item>
		<el-form-item label="重量">
			<el-input
				type="number"
				placeholder="请输入重量"
				v-model="skuInfo.weight"
			></el-input>
		</el-form-item>
		<el-form-item label="规格描述">
			<el-input
				type="textarea"
				rows="4"
				placeholder="规格描述"
				v-model="skuInfo.skuDesc"
			></el-input>
		</el-form-item>
		<el-form-item label="平台属性">
			<el-form label-width="80px" :inline="true">
				<el-form-item
					v-for="item in attrList"
					:key="item.id"
					:label="item.attrName"
				>
					<el-select
						placeholder="请选择平台属性"
						clearable
						v-model="item.selectData"
					>
						<el-option
							v-for="it in item.attrValueList"
							:key="it.id"
							:value="`${item.id}:${it.id}`"
							>{{ it.valueName }}
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-form-item>
		<el-form-item label="销售属性">
			<el-form label-width="80px" :inline="true">
				<el-form-item
					v-for="item in saleAttrList"
					:key="item.id"
					:label="item.saleAttrName"
				>
					<el-select
						placeholder="请选择销售属性"
						clearable
						v-model="item.selectData"
					>
						<el-option
							v-for="it in item.spuSaleAttrValueList"
							:key="it.id"
							:value="`${item.id}:${it.id}`"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-form-item>
		<el-form-item label="图片列表">
			<el-table
				border
				stripe
				:data="spuImageList"
				@selection-change="selectImg"
			>
				<el-table-column type="selection" width="50" />
				<el-table-column label="图片">
					<template v-slot="{ row }">
						<el-image
							:src="row.imgUrl"
							fit="fill"
							style="height: 80px"
							:lazy="true"
						></el-image>
					</template>
				</el-table-column>
				<el-table-column label="名称" props="imgName"></el-table-column>
				<el-table-column label="操作">
					<template v-slot="{ row }">
						<el-button v-if="row.isDefault === '0'" @click="changeDefault(row)"
							>设为默认</el-button
						>
						<el-tag type="primary" size="small" v-else>默认图片</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-form-item>
		<el-form-item label="">
			<el-button type="primary" @click="save">保存</el-button>
			<el-button type="default" @click="emit('changeType', 0)">取消</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import { reqAttrList, type AttrListType } from "@/api/attr";
import {
reqSaveSkuInfo,
	type SkuAttrValueListType,
	type SkuInfoItemType,
	type SkuSaleAttrValueListType,
} from "@/api/sku";
import {
	reqSaleAttrSelf,
	reqSpuImageList,
	type SaleAttrListType,
	type SpuImgItemType,
	type SpuImgListType,
	type SpuInfoType,
} from "@/api/spu";
import { useCategoryStore } from "@/stores/category";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { onMounted, ref } from "vue";

// 获得store对象
const categoryStore = useCategoryStore();
// 拿到category中的所有id
const { category1Id, category2Id, category3Id } = storeToRefs(categoryStore);

// 接收传过来的数据
const props = defineProps<{ spuInfo: SpuInfoType }>();

// 创建spuInfo 存放spu的数据
const spuInfo = props.spuInfo;

// skuform初始化需要的数据  平台(商品)属性列表  请求当前spu的销售属性列表   请求当前spu的图片列表
const attrList = ref<AttrListType>([]);
const saleAttrList = ref<SaleAttrListType>([]);
const spuImageList = ref<SpuImgListType>([]);

// 封装请求初始化数据函数
const initData = async () => {
	const r1 = reqAttrList(
		category1Id.value as number,
		category2Id.value as number,
		category3Id.value as number
	);
	const r2 = reqSaleAttrSelf(props.spuInfo.id as number);
	const r3 = reqSpuImageList(props.spuInfo.id as number);
	try {
		const res = await Promise.all([r1, r2, r3]);
		attrList.value = res[0];
		saleAttrList.value = res[1];
		spuImageList.value = res[2];

		// 添加 属性
		attrList.value.forEach(item => {
			item.selectData = ""; // 添加selectData 属性 为了收集数据使用
		});
		saleAttrList.value.forEach(item => {
			item.selectData = "";
		});
		spuImageList.value.forEach(item => {
			item.isDefault = "0";
		});
	} catch (e) {
		ElMessage.error("请求初始化数据失败");
	}
};

// 初始化数据
onMounted(() => {
	initData();
});

// 自定义事件
const emit = defineEmits<{
	(event: "changeType", newType: number): void;
}>();

// 创建skuInfo数据
const skuInfo = ref<SkuInfoItemType>({
	// id?: number,
	spuId: spuInfo.id as number, //所在的spuId
	price: 0, //当前sku的价格
	skuName: "", //当前sku的名称
	skuDesc: "", //当前sku的描述
	weight: "", //当前sku的重量
	tmId: spuInfo.tmId, //当前sku所在的品牌id
	category3Id: spuInfo.category3Id as number, //当前sku所在的三级分类的id
	skuDefaultImg: "", //当前sku的默认的图片
	isSale: 1, //当前sku是否上架
	// createTime: string, //当前sku的创建时间
	skuImageList: [],
	skuAttrValueList: [],
	skuSaleAttrValueList: [],
});

interface selectionType {
	id: number;
	imgName: string;
	imgUrl: string;
	spuId: number;
	isDefault: string;
}

// 收集图片数据
const skuImgList = ref<selectionType[]>([]);
// 收集图片 的事件
const selectImg = (selection: selectionType[]) => {
	skuImgList.value = selection;
};

// 切换默认图片
const changeDefault = (row: SpuImgItemType) => {
	// 派他思想
	spuImageList.value.forEach(item => {
		item.isDefault = "0";
	});
	row.isDefault = "1";
	// 当前图片的地址  收集到skuInfo中
	skuInfo.value.skuDefaultImg = row.imgUrl;
};

// 保存事件
const save = async () => {
	// 整理图片参数
	skuInfo.value.skuImageList = skuImgList.value.map(item => {
		return {
			imgName: item.imgName,
			imgUrl: item.imgUrl,
			spuImgId: item.id,
			isDefault: item.isDefault,
		};
	});

	// 整理平台属性 只需要收集attrid和valueid
	attrList.value.forEach(item => {
		if (!item.selectData) return;
		const [attrId, valueId] = item.selectData.split(":");
		const newAttrObj = {
			attrId: +attrId,
			valueId: +valueId,
		};
		(skuInfo.value.skuAttrValueList as SkuAttrValueListType).push(newAttrObj);
	});

	// 收集销售属性 只需要收集saleAttrValueId  saleAttrId
	saleAttrList.value.forEach(item => {
		if (!item.selectData) return;
		const [saleAttrId, saleAttrValueId] = item.selectData.split(":");
		const newSaleObj = {
			saleAttrId: +saleAttrId,
			saleAttrValueId: +saleAttrValueId,
		};
		(skuInfo.value.skuSaleAttrValueList  as SkuSaleAttrValueListType).push(
			newSaleObj
		);
	});


	try {
		await reqSaveSkuInfo(skuInfo.value)
		ElMessage.success('新增sku成功')
		emit('changeType', 0)
	} catch (e) {
		ElMessage.error('新增sku失败')
	}


};
</script>

<style scoped></style>
